import { Button } from 'antd';
import React, { useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef } from 'react';
import Child1 from './Child1';
import Child2 from './Child2';

const themeContext = React.createContext('');

const initialState = { count: 0 };

const reducer = (state: any, action: any) => {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
}

let prev : any;
const App: React.FC = () => {
    const [num, setNum] = useState(10);
    const [x, setx] = useState(100);
    let [theme, setTheme] = useState("red");
    const [state, dispatch] = useReducer(reducer, initialState);
    const [val, setVal] = useState('');
    const [name, setName] = useState('');
    const btnBox = useRef(null);
    if(!prev){
      prev = btnBox;
    } else {
        console.log(prev === btnBox);
    }
    const handler1 = useCallback(() => {
        setVal("娃哈哈");
    }, [val]);
    const handler2 = useCallback(() => {
        setName("张三");
    }, [name]);
    const handleClick = () => {
        setNum(num + 1);
    }

    const changeName = (name:any) => {
        return name + '------名字发生了改变';
    }

    const Name = useMemo(()=> changeName(name), [name]);

    /**
     * 在组件 第一次渲染完 && 每一次更新完 调用
     * 等同于 componentDidMount && componentDidUpdate
     */
    useEffect(() => {
        console.log("@1", num, x);
    });

    /**
     * 只在组件 第一次渲染完 调用
     * 等同于 componentDidMount
     */
    useEffect(() => {
        console.log("@2", num, x);
        console.log(btnBox.current);
    }, []);

    /**
     * 第一次渲染完 以及 依赖的状态发生改变
     */
    useEffect(() => {
        console.log("@3", num);
    }, [num]);

    /**
     * 返回的函数将在 组件卸载后 被调用
     * 等同于 componentWillUnmount
     */
    useEffect(() => {
        return () => {
            console.log("@4");
        }
    }, []);

    return (
        <div className='App'>
            <p>useState用法：使用状态管理</p>
            <p>{num}</p>
            <Button onClick={handleClick}>新增</Button>
            <p>useEffect用法：使用周期函数</p>
            <p>{num}</p>
            <Button ref={btnBox} onClick={() => { setNum(num + 1) }}>处理</Button>
            <p>{x}</p>
            <Button onClick={() => { setx(x + 1) }}>处理</Button>
            <themeContext.Provider value=''>
                <div className={`App ${theme}`}>
                    <p>{theme}</p>
                    <div>
                        <Child />
                    </div>
                </div>
            </themeContext.Provider>
            <p>count: {state.count}</p>
            <Button onClick={() => dispatch({ type: 'increment' })}>+</Button>
            <Button onClick={() => dispatch({ type: 'decrement' })}>-</Button>
            <br />
            <p>{val}</p>
            <Child1 handler={handler1} />
            <p>{name}</p>
            <Child2 Name={Name} handler={handler2} />
        </div>
    )
}

const Child: React.FC = () => {
    const { setTheme }: any = useContext(themeContext);
    return (
        <div>
            <button onClick={() => setTheme("red")}>red</button>
        </div>
    );
}

export default App;